<template>
  <div class="hall">
    <home-page></home-page>
  <div class="hot">
    <div class="topTitle">
        <div class="hotsong">
            <div>更新日期:{{updateTime}}</div>
        </div>
    </div>
    <loading v-if="showList.length==0"></loading>
    <music-list @play="$emit('play',$event)" :songlist="showList" :shownum="true" v-else></music-list>
    <div ref="bottom" class="loadingmore" @click="loadMore">{{this.page>=5?"到底了...":"加载更多"}}</div>
  </div>
    <i
      @click="scrollToTop"
      class="toTop fa fa-chevron-up"
      aria-hidden="true"
    ></i>
    <!-- <div ></div> -->
  </div>
</template>
<script>
import HomePage from "@/components/HomePage";
import MusicList from "@/components/MusicList";
export default {
  name: "Hot",
  data() {
    return {
      hotList: [],
      page: 1, //记录第几页
      banners: [],
      updateTime:
        new Date().getMonth() + 1 + "月" + new Date().getDate() + "日",
    };
  },
  created() {
    this.axios
      .get("/playlist/detail", { params: { id: 3778678 } })
      .then((result) => {
        let musiclist = result.playlist.tracks.map((v, index) => {
          v.song = {
            privilege: result.privileges[index], 
            artists: v.ar, 
            album: v.al, 
          };
          return v;
        });
        this.hotList = musiclist; 
      });
    this.axios.get("/banner?type=1").then((result) => {
      this.banners = result.banners;
    });
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      window.addEventListener("scroll", vm.windowScroll);
    });
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.windowScroll);
  },
  beforeRouteLeave(to, from, next) {
    window.removeEventListener("scroll", this.windowScroll);
    next();
  },
  methods: {
    loadMore() {
      if (this.page >= 10) {
        return;
      }
      this.page++;
    },
    windowScroll() {
      if (window.scrollY + window.innerHeight > this.$refs.bottom.offsetTop) {
        this.loadMore();
      }
    },
    scrollToTop() {
      window.scrollTo(0, 0);
    },
  },
  computed: {
    showList() {
      if (this.hotList.length > 0) {
        let endPos = this.page * 20;
        return this.hotList.slice(0, endPos);
      }
      return [];
    },
  },
  components: {
    MusicList,
    HomePage,
  },
};
</script>
<style lang="less" scoped>
.topTitle{
  height:39vw;
  background:url(../assets/hot_music_bg_2x.jpg) no-repeat;
  background-size: cover;
  position: relative;
  &::after{
    content:"";
    position: absolute;
    left:0px;
    top:0px;
    right:0px;
    bottom: 0px;
    background: #22d59c8a;
    z-index:1;
  }
  .hotsong{
    top:50%;
    left:20px;
    z-index:2;
    transform: translateY(-50%);
    position: absolute;
    &::before{
      content:"";
      display: inline-block;
      width:142px;
      height: 67px;
      background:url(../assets/index_icon_2x.png) no-repeat;
      background-size: 166px 97px;
      background-position: -25px -30px;
    }
    &>div{
      font-size:12px;
      color:white;
    }
  }
}
.loadingmore{
  text-align: center;
  line-height:80px;
  color:#888;
}

.toTop {
  // background-color: red;
  width: 40px;
  height: 40px;
  position: fixed;
  bottom: 120px;
  right: 10px;
  font-size: 25px;
  text-align: center;
  line-height: 35px;
  border-radius: 50%;
  color: white;
  background-color: var(--cy-Color);
}
</style>
